<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="space-between">
          <el-tabs v-model="activeName">
            <el-tab-pane label="员工历史归档" name="first" />
          </el-tabs>
          <div class="block" style="margin-top:-5px">
            <el-date-picker
              v-model="yearDate"
              style="margin-top:-5px"
              type="year"
              placeholder="选择年"
              @change="yearChange"
            />
          </div>
        </el-row>
        <el-row style="border-bottom:1px solid #f0f0f0;margin-top:-17px" />
        <div v-for="(item,index) in titleDate" :key="item.id" class="list">
          <div class="title" @click="historyDetail(item.id,index)">
            <el-row style="width:100%">
              <el-col :span="1"><i class="el-icon-arrow-right" style="font-weight:800;font-size:18px" /></el-col>
              <el-col :span="19">
                <div>{{ item.archiveYear }}-{{ item.archiveMonth }}员工报表</div>
                <div>考勤统计</div>
              </el-col>
              <el-col :span="2">
                <div>总人数</div>
                <div>{{ item.totalPeopleNum }}</div>
              </el-col>
              <el-col :span="2">
                <div>全勤人数</div>
                <div>{{ item.fullAttePeopleNum }}</div>
              </el-col>
            </el-row>
          </div>
          <div style="border-bottom:3px solid #cccccc" />
          <div v-if="tableShow===index" class="body">
            <el-alert
              title="迟到、早退和补签的统计单位为“次”；所有假期类型、外出、旷工的统计单位均为“天”。"
              type="warning"
              :closable="false"
              show-icon
            />
            <el-row type="flex" justify="end">
              <el-button type="primary" size="mini" style="margin:10px 0" @click="exportExcel(item.id,index)">导出</el-button>
            </el-row>
            <el-row>
              <el-table
                :data="tableData"
                border
                style="width: 100%"
              >
                <el-table-column align="center" prop="name" label="姓名" width="120" />
                <el-table-column align="center" prop="workNumber" label="工号" width="100" />
                <el-table-column align="center" prop="mobile" label="手机号" width="200" />
                <el-table-column align="center" prop="department" label="部门" width="200" />
                <el-table-column align="center" prop="leaveDays" label="事假" width="100" />
                <el-table-column align="center" prop="dayOffLeaveDays" label="调休" width="100" />
                <el-table-column align="center" prop="normalDays" label="正常" width="100" />
                <el-table-column align="center" prop="laterTimes" label="迟到次数" width="100" />
                <el-table-column align="center" prop="earlyTimes" label="早退次数" width="100" />
                <el-table-column align="center" prop="absenceDays" label="旷工天数" width="100" />
                <el-table-column align="center" prop="isFullAttendanceint" :formatter="fStandards" label="是否全勤" width="100" />
                <el-table-column align="center" prop="actualAtteOfficialDays" label="实际出勤天数（正式）" width="180" />
                <el-table-column align="center" prop="workingDays" label="应出勤工作日" width="120" />
                <el-table-column align="center" prop="salaryOfficialDays" label="计薪天数（正式）" width="150" />
              </el-table>
            </el-row>
          </div>
        </div>
      </el-card>
    </div>
  </div>

</template>

<script>
import { gethistoryList, gethistoryReports } from '@/api/attendance'
export default {
  data() {
    return {
      activeName: 'first',
      yearDate: '2021',
      tableShow: '',
      tableData: [],
      titleDate: []
    }
  },
  mounted() {
    this.gethistoryList()
  },
  methods: {
    async gethistoryList() {
      const res = await gethistoryList({ year: this.yearDate })
      console.log(res)
      this.titleDate = res
    },
    async historyDetail(id, index) {
      if (this.tableShow === '') {
        this.tableShow = index
        this.tableData = await gethistoryReports(id)
      } else {
        this.tableShow = ''
      }
    },
    // 格式化全勤
    fStandards(row, col, cellValue) {
      return cellValue === 1 ? '否' : '是'
    },
    // 导出
    async exportExcel(id, index) {
      this.tableShow = index
      // this.$message('导出')
      // 这里是按钮被点击, 可以就在这里单独引入需要的库
      const { export_json_to_excel } = await import('@/vendor/Export2Excel')
      console.log(export_json_to_excel)

      // 加载所有员工
      const res = await await gethistoryReports(id)
      console.log(res)

      const tHeader = ['姓名', '工号', '手机号', '部门', '事假', '调休', '正常', '迟到次数', '早退次数', '日均时长', '旷工天数', '是否全勤', '实际出勤天数', '应出勤工作日', '计薪天数'] // 表头 必填

      const filterVal = ['name', 'workNumber', 'mobile', 'department', 'leaveDays', 'dayOffLeaveDays', 'normalDays', 'laterTimes', 'earlyTimes', 'averageDailyNaturalDays', 'whetherItIsFullOfWork', 'actualAttendanceDaysAreOfficial', 'attendanceDay', 'officialSalaryDays']
      const dict = {}
      tHeader.forEach((item, index) => {
        filterVal.forEach((item1, index1) => {
          if (index === index1) {
            dict[item] = item1
          }
        })
      })
      console.log(dict)

      const userData = res.map(user => {
        return this.object2Arrayy(user, dict)
      })

      console.log(userData)
      export_json_to_excel({
        header: Object.keys(dict),
        data: userData
      })
    },
    object2Arrayy(user, dict) {
      const newUser = []
      for (const key in dict) {
        const enKey = dict[key]
        const value = user[enKey]
        newUser.push(value)
      }
      return newUser
    },
    yearChange(val) {
    //   console.log(val)
      const d = new Date(val)
      this.yearDate = d.getFullYear().toString()
      this.gethistoryList()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__item{
    font-size: 18px;
    font-weight: 700;
    padding: 0px 25px;
    display: block;
    border-bottom: 2px solid #409eff;
    line-height: 40px;
}
::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 25px;
    padding-right: 25px;
}
::v-deep .el-collapse-item__arrow{
    display: none;
}
::v-deep .el-collapse-item{
    border-top: 1px solid #f0f0f0;
    border-bottom: 3px solid #ccc;
    padding: 15px;
    height: 98px;
    .el-collapse-item__header{
            border-bottom:0px
    }

}
::v-deep .el-collapse-item__header{
    height: 68px;
}
.title{
    height: 98px;
    display: flex;
    align-items: center;
    // border-bottom:3px solid #cccccc
    div{
        height: 34px;
        line-height: 34px;
    }
}

::v-deep .el-table th.is-leaf{
    background-color: #fafafa;
    border-bottom: 2px solid #e8e8e8 ;
}
</style>
